<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <title>20201260618-刘世宇-taptap</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/second.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>

<body>
    <div id="main">
        <div id="head"></div>
        <div id="fixed">
            <a href="./index.html"><span class="iconfont icon-zuo"></span></a>
            <h3>Flash Party(篝火测试版)</h3>
            <a href="#"><span class="iconfont icon-gengduo"></span></a>
        </div>
        <div><img src="./img/zuoye4-1.jpg"></div>
        <div class="bt">
            <img src="./img/touxiang1-1.jpg">
            <div>
                <h3>Flash Party(篝火测试版)</h3>
                <span class="iconfont icon-chakangengduo"></span>
                <p>开发者入驻</p>
            </div>
        </div>
        <div class="js">
            <div class="cs">
                <div>
                    <h5>厂商：</h5>
                    <p>Uncle W</p>
                </div>
                <div>
                    <h5>帖子：</h5>
                    <p>1860</p>
                </div>
                <div>
                    <h5>关注：</h5>
                    <p>9.6w</p>
                </div>
            </div>
            <div class="tp">
                <span class="iconfont icon-pingfen"></span>
                <h3>暂无</h3>
            </div>
        </div>
        <div id="xz">
            <a href="#">
                <span class="iconfont icon-icon-download"></span>
                <p>下载 113MB</p>
            </a>
        </div>
        <div class="lt">
            <div>
                <a href="#">
                    <span class="iconfont icon-icon-download"></span>
                    <p> 关注</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <span class="iconfont icon-kongxinwujiaoxing"></span>
                    <p> 评价 6265</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <span class="iconfont icon-jurassic_bbs"></span>
                    <p> 论坛</p>
                </a>
            </div>
        </div>
        <div class="swiper-container" id="s2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/zuoye4-1.jpg">
                </div>
                <div class="swiper-slide">
                    <img src="./img/zuoye4-2.jpg">
                </div>
                <div class="swiper-slide">
                    <img src="./img/zuoye4-3.jpg">
                </div>
                <div class="swiper-slide">
                    <img src="./img/zuoye4-4.jpg">
                </div>
                <div class="swiper-slide">
                    <img src="./img/zuoye4-5.jpg">
                </div>
                <div class="swiper-slide">
                    <img src="./img/zuoye4-6.jpg">
                </div>
            </div>
        </div>
        <div class="jj">
            <div class="bit">
                <h4>简介</h4>
                <a href="#">
                    <p>查看全部</p>
                </a>
            </div>
            <div class="wb">
                <p>
                      这是一款尚处在超超超早期的、轻松休闲的英雄射击手游。如
                    果要用几个关键词来形容这款游戏，我们心目中有这些词：射
                    击、多英雄、对战、轻松、年轻、科幻。现阶段，大家可以在现
                    有的5个模式中体验到8位风格不同的英雄。(测试资格获取：
                    https://.taptap.com/mgeyrDtU)
                    之所以现在就上架TapTap篝火测试，除了想早点验证游戏的核心玩
                    法外...

                </p>
            </div>
            <div class="bit">
                <h4>开发者的话</h4>
                <a href="#">
                    <p>查看全部</p>
                </a>
            </div>
            <div class="wb">
                <p>
                      没有人会错过这档风靡全世界的娱乐节目，除非他被隔壁家的熊孩子
                    用弹弓射瞎了眼睛。我们拥有各大联盟共同赞助的最丰厚的奖金、最
                    安全先进的技术保障、环绕全球的最丰富广阔的比赛区域，为大家带
                    来最精彩的直播秀。选手们将在这里展现个性与身手，无论是各自为
                    战还是团队竞争...。
                </p>
            </div>

        </div>
        <div class="xxxx">
            <h4>详细信息</h4>
            <div>
                <p>厂商</p>
                <p>Uncle W</p>
            </div>
            <div>
                <p>是否有内购</p>
                <p>有内购</p>
            </div>
            <div>
                <p>语言</p>
                <p>简体中文</p>
            </div>
            <div>
                <p>游戏大小</p>
                <p>113MB</p>
            </div>
            <div>
                <p>更新时间</p>
                <p>2021-06-04</p>
            </div>
            <div>
                <p>网络</p>
                <p>需要</p>
            </div>
            <div>
                <p>系统版本要求</p>
                <p>安卓5.1.1+</p>
            </div>
        </div>
    </div>

    <script src="./js/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper('#s2', {
            slidesPerView: 1,
            spaceBetween: 8,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
        });
        window.onscroll = function () {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            // 滚动事件documentElement为滚动事件代码
            console.log(st);
            var h = head.offsetHeight;
            if (st > h) {
                fixed.style.position = "fixed"
                main.style.marginTop = "60px";
            } else {
                fixed.style.position = "static"
                main.style.marginTop = 0;
            }
        }
    </script>
</body>

</html>